<template>
  <div class="container mx-auto px-4 py-8">
    <div class="flex items-center justify-between mb-8">
      <h1 class="text-2xl font-bold">{{ currentTheme.title }} - 全部评价</h1>
      <el-button @click="router.back()">返回</el-button>
    </div>

    <!-- 评价统计 -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
      <div class="flex items-center justify-between">
        <div class="text-center">
          <div class="text-3xl font-bold text-primary mb-2">{{ averageRating }}</div>
          <div class="text-gray-600">综合评分</div>
        </div>
        <div class="flex-grow mx-12">
          <div v-for="item in ratingStats" :key="item.stars" class="flex items-center mb-2">
            <span class="text-sm text-gray-600 w-16">{{ item.stars }}星</span>
            <div class="flex-grow mx-4">
              <div class="bg-gray-200 h-2 rounded-full overflow-hidden">
                <div
                  class="bg-primary h-full rounded-full"
                  :style="{ width: `${item.percentage}%` }"
                ></div>
              </div>
            </div>
            <span class="text-sm text-gray-600 w-16">{{ item.percentage }}%</span>
          </div>
        </div>
        <div class="text-center">
          <div class="text-3xl font-bold text-primary mb-2">{{ currentTheme.reviews.length }}</div>
          <div class="text-gray-600">累计评价</div>
        </div>
      </div>
    </div>

    <!-- 筛选条件 -->
    <div class="bg-white rounded-lg shadow-md p-4 mb-8">
      <div class="flex items-center space-x-4">
        <span class="text-gray-600">评分：</span>
        <el-radio-group v-model="filterRating" size="small">
          <el-radio-button label="all">全部</el-radio-button>
          <el-radio-button label="5">5星</el-radio-button>
          <el-radio-button label="4">4星</el-radio-button>
          <el-radio-button label="3">3星及以下</el-radio-button>
        </el-radio-group>
        <span class="text-gray-600 ml-8">内容：</span>
        <el-checkbox v-model="hasImage">有图</el-checkbox>
        <el-checkbox v-model="hasReply">有回复</el-checkbox>
      </div>
    </div>

    <!-- 评价列表 -->
    <div class="space-y-6">
      <div
        v-for="review in filteredReviews"
        :key="review.id"
        class="bg-white rounded-lg shadow-md p-6"
      >
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center">
            <img
              :src="review.avatar"
              :alt="review.name"
              class="w-12 h-12 rounded-full mr-4"
            >
            <div>
              <h4 class="font-bold">{{ review.name }}</h4>
              <div class="flex items-center space-x-2">
                <div class="flex text-yellow-400">
                  <el-icon v-for="n in review.rating" :key="n"><Star /></el-icon>
                </div>
                <span class="text-gray-400 text-sm">{{ review.createTime }}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="bg-gray-50 rounded p-3 mb-4 text-sm text-gray-600">
          <p class="mb-1">规格：{{ review.specs }}</p>
          <p>配送：{{ review.delivery }}</p>
        </div>

        <p class="text-gray-600 mb-4">{{ review.content }}</p>

        <div class="mt-4 flex flex-wrap gap-2 mb-4">
          <div
            v-for="(img, index) in review.images"
            :key="index"
            class="relative group cursor-pointer overflow-hidden rounded-lg"
            @click="showImage(img, '购买实拍')"
          >
            <img
              :src="img"
              class="w-20 h-20 object-cover transition-transform duration-300 group-hover:scale-110"
            >
            <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-opacity duration-300 flex items-center justify-center">
              <el-icon class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300" :size="24">
                <ZoomIn />
              </el-icon>
            </div>
          </div>
        </div>

        <!-- 商家回复 -->
        <div
          v-if="review.reply"
          class="bg-gray-50 rounded p-4 text-sm"
        >
          <p class="text-gray-600 font-medium mb-1">商家回复：</p>
          <p class="text-gray-600">{{ review.reply.content }}</p>
          <p class="text-gray-400 text-xs mt-2">{{ review.reply.time }}</p>
        </div>
      </div>
    </div>

    <!-- 图片预览对话框 -->
    <el-dialog
      v-model="showPreview"
      :title="previewTitle"
      width="80%"
      class="preview-dialog"
      :close-on-click-modal="true"
      :show-close="false"
    >
      <div class="relative">
        <img
          :src="previewImage"
          class="max-w-full max-h-[70vh] mx-auto rounded-lg shadow-xl"
        >
        <div class="absolute top-2 right-2">
          <el-button
            type="primary"
            circle
            @click="showPreview = false"
          >
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { Star, ZoomIn, Close } from '@element-plus/icons-vue'
import { themes } from '@/data/themes'

const route = useRoute()
const showPreview = ref(false)
const previewImage = ref('')
const previewTitle = ref('')
const filterRating = ref('all')
const hasImage = ref(false)
const hasReply = ref(false)

const currentTheme = computed(() => {
  const themeId = route.params.id
  return themes[themeId] || {}
})

// 计算平均评分
const averageRating = computed(() => {
  const reviews = currentTheme.value.reviews || []
  if (reviews.length === 0) return 0
  const total = reviews.reduce((sum, review) => sum + review.rating, 0)
  return (total / reviews.length).toFixed(1)
})

// 计算评分统计
const ratingStats = computed(() => {
  const reviews = currentTheme.value.reviews || []
  const total = reviews.length
  if (total === 0) return []

  const stats = [5, 4, 3, 2, 1].map(stars => {
    const count = reviews.filter(r => r.rating === stars).length
    return {
      stars,
      count,
      percentage: Math.round((count / total) * 100)
    }
  })

  return stats
})

// 过滤评价
const filteredReviews = computed(() => {
  let reviews = currentTheme.value.reviews || []

  if (filterRating.value !== 'all') {
    const rating = parseInt(filterRating.value)
    if (rating === 3) {
      reviews = reviews.filter(r => r.rating <= 3)
    } else {
      reviews = reviews.filter(r => r.rating === rating)
    }
  }

  if (hasImage.value) {
    reviews = reviews.filter(r => r.images && r.images.length > 0)
  }

  if (hasReply.value) {
    reviews = reviews.filter(r => r.reply)
  }

  return reviews
})

const showImage = (img, title = '') => {
  previewImage.value = img
  previewTitle.value = title
  showPreview.value = true
}
</script>

<style scoped>
.preview-dialog :deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
}

.preview-dialog :deep(.el-dialog__header) {
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e4e4;
}

.preview-dialog :deep(.el-dialog__body) {
  padding: 24px;
  background-color: #f5f5f5;
}

@media (max-width: 768px) {
  .preview-dialog :deep(.el-dialog) {
    width: 95% !important;
    margin: 0 auto;
  }
}
</style>
